<template>
    <div class="article-edit pb60">
        <Form :model="detailInfo" ref="articleEdit" label-position="right" :rules="articleEdit" :label-width="80"
            action="javascript:void(0)">
            <FormItem label="选择栏目" prop="cate_id">
                <TreeSelect clearable v-model="detailInfo.cate_id" :data="cateSelect" v-width="200"></TreeSelect>
            </FormItem>
            <FormItem label="文章标题" prop="title">
                <Input v-model="detailInfo.title"></Input>
            </FormItem>
            <FormItem label="关键字" prop="keywords">
                <Input v-model="detailInfo.keywords"></Input>
            </FormItem>
            <FormItem label="文章描述" prop="description">
                <Input type="textarea" v-model="detailInfo.description" :autosize="{ minRows: 4, maxRows: 8 }"></Input>
            </FormItem>
            <FormItem label="上传缩略图">
                <upload-thumb v-model="detailInfo.thumb" ref="uploadthumb" :defaultList="thumbList"></upload-thumb>
            </FormItem>
            <FormItem label="文章内容">
                <tinymce-editor ref="editContent" :tinymceValue="detailInfo.content"></tinymce-editor>
            </FormItem>
            <FormItem label="文章模板">
                <Input v-model="detailInfo.tpl" style="width: 200px"></Input>
            </FormItem>
            <FormItem label="是否推荐">
                <i-switch :true-value="1" :false-value="0" v-model="detailInfo.push_flag" size="large">
                    <template #open>是</template>
                    <template #close>否</template>
                </i-switch>
            </FormItem>
            <FormItem label="来源">
                <Input v-model="detailInfo.source"></Input>
            </FormItem>
            <FormItem label="是否外链">
                <i-switch :true-value="1" :false-value="0" v-model="detailInfo.link_flag" size="large">
                    <template #open>是</template>
                    <template #close>否</template>
                </i-switch>
            </FormItem>
            <FormItem label="外链" v-if="detailInfo.link_flag == 1">
                <Input v-model="detailInfo.url" placeholder="输入外部链接地址..."></Input>
            </FormItem>
            <FormItem label="排序" prop="sort">
                <InputNumber :max="9999" :min="0" v-model="detailInfo.sort"></InputNumber>
            </FormItem>
            <FormItem label="点击量" prop="hits">
                <InputNumber :max="9999" :min="0" v-model="detailInfo.hits"></InputNumber>
            </FormItem>
            <FormItem label="发布时间">
                <DatePicker :model-value="publishAt" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="发布时间..."
                    style="width: 200px" @on-change="publishAtChange($event)"></DatePicker>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="goBack()">返回</Button>
                <Button type="primary" @click="handleSubmit('articleEdit')">提交</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
import UploadThumb from '../.././components/thumb'
import TinymceEditor from '../.././components/tinymce'
export default {
    name: 'ArticleEdit',
    data() {
        return {
            detail_id: 0,
            cateSelect: [],
            detailInfo: {
                'cate_id': '',
                'title': '',
                'keywords': '',
                'description': '',
                'thumb': '',
                'content': '',
                'tpl': 'show',
                'push_flag': 0,
                'source': '',
                'link_flag': 0,
                'url': '',
                'sort': 0,
                'hits': 99,
                'publish_at': ''
            },
            publishAt: '',
            thumbList: [],
            articleEdit: {
                cate_id: [
                    { required: true, type: 'integer', message: '栏目必须填写', trigger: 'change' }
                ],
                title: [
                    { required: true, message: '标题必须填写', trigger: 'blur' }
                ]
            },
        }
    },
    // 组件
    components: {
        UploadThumb,
        TinymceEditor
    },
    created() {
        this.detail_id = this.$route.query.id;
        this.getData(this.detail_id);
    },
    methods: {
        publishAtChange(e) {
            this.detailInfo.publish_at = e;
            this.publishAt = e;
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (!valid) {
                    this.$Message.error('请检查输入的信息是否正确！');
                } else {
                    if (this.$refs['uploadthumb'].uploadList.length) {
                        this.detailInfo.thumb = this.$refs['uploadthumb'].uploadList[0].url;
                    } else {
                        this.detailInfo.thumb = '';
                    }
                    this.detailInfo.content = this.$refs['editContent'].tinymce_value
                    var params = this.detailInfo;
                    params.detail_id = this.detail_id;
                    this.$api.article.update(params).then(res => {
                        this.$router.back();
                    });
                }
            })
        },
        goBack() {
            this.$router.back();
        },
        getData(id) {
            this.$api.category.select().then(res => {
                this.cateSelect = res.result;
            });
            this.$api.article.detail({ detail_id: id }).then(res => {
                this.detailInfo = res.result;
                this.publishAt = this.detailInfo.publish_at;
                if (res.result.thumb != '' && res.result.thumb != null) {
                    this.thumbList = [{ 'name': '图片文件', 'url': res.result.thumb, 'status': 'finished' }];
                } else {
                    this.thumbList = [];
                }
                this.$refs['editContent'].tinymce_value = res.result.content
            });
        },
    }
}
</script>
